<template>
  <div id="aboutMe" class="indexDiv m-padded-tb-large" style="">
    <div style="margin-top: 20px; margin-bottom: 60px">
      <el-row :gutter="30">
        <!-- 左边整个图片 -->
        <el-col :span="9" :offset="5">
          <div class="m-border" style="padding: 18px" align="center">

            <div>
              <img src="../../assets/img/me.png" alt="图片" width="730px" style="border-radius: 8px">
            </div>
          </div>
        </el-col>

        <!-- 右边的top -->
        <el-col :span="5">
          <div>
            <!-- 关于我 -->
            <div class="m-border">
              <!-- 排头 -->
              <div style="background-color: #f5f5c1; border-radius:5px ">
                <div style=" border-bottom: 2px solid rgb(0, 181, 173); height: 50px">
                  <div style="float: left; margin-left: 20px; margin-top: 14px; height:60px; color: rgb(97, 98, 98)">
                    <i class="el-icon-user" style="font-weight: 600; font-size: 18px"> 关于我</i  >
                  </div>
                </div>
              </div>

              <!-- 个人介绍 -->
              <div class="m-about-module-bottom-top">
                <div class="m-about-module">
                  <p class="m-text">罗世举，一个独立开发者，折腾在 0 和 1 世界的神秘男子；一个终身学习者，誓将学习无限循环. 希望结识可以共同成长的小伙伴.</p>
                  <p class="m-text">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法...</p>
                </div>
              </div>

              <!-- 分类小框 -->
              <div class="m-about-module-bottom">
                <div class="m-about-module">
                  <div @click="toTypeInfo(typeBlogCount.typeId, index)"
                       style="cursor:pointer;"
                       v-for="(typeBlogCount, index) in typeBlogCountList.slice(0, 6)" :key="typeBlogCount.typeId"
                       class="ui orange basic left pointing label">{{ typeBlogCount.typeName }}</div>
                </div>
              </div>

              <!-- 标签小框 -->
              <div class="m-about-module-bottom">
                <div class="m-about-module" >
                  <a @click="toTagInfo(tagBlogCount.tagId, index)"
                     v-for="(tagBlogCount, index) in tagBlogCountList.slice(0, 5)" :key="tagBlogCount.tagId"
                     class="ui teal basic left pointing label m-margin-tb-tiny m-border">
                    {{ tagBlogCount.tagName }}
                    <div class="detail" >{{ tagBlogCount.blogCount }}</div>
                  </a>
                </div>
              </div>

              <!-- 个人联系方式 -->
              <div class="m-about-module-bottom">
                <div class="m-about-module">
                  <!-- github -->
                  <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
                  <!-- 微信 -->
                  <el-tooltip placement="bottom">
                    <div slot="content" class="tips-content text-tips-content">
                      <div class="rule-box">
                        <img src="../../assets/img/wechat.jpg" alt="微信" width="100px">
                      </div>
                    </div>
                    <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
                  </el-tooltip>
                  <!-- QQ -->
                  <el-tooltip placement="bottom">
                    <div slot="content" class="tips-content text-tips-content">
                      <span>2542331408</span><br><br>
                      <div class="rule-box">
                        <img src="../../assets/img/wechat.jpg" alt="QQ" width="100px">
                      </div>
                    </div>
                    <a href="#" class="ui qq circular icon button"><i class="qq icon"></i></a>
                  </el-tooltip>
                </div>
                <div class="ui wechat-qr flowing popup transition hidden">
                  <img src="../../assets/img/wechat.jpg" alt="" class="ui rounded image" style="width: 110px">
                </div>
              </div>
            </div>



          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      typeBlogCountList: [],
      tagBlogCountList: []
    };
  },
  methods:{
    // 查询分类对应博客数量列表
    getTypeBlogCountList(){
      this.$http.get("http://localhost:8088/show/types/blogCount").then(res => {
        if (res.data.code == 0) { // 成功
          this.typeBlogCountList = res.data.data;
        }
      });
    },
    // 查询标签对应博客数量列表
    getTagBlogCountList(){
      this.$http.get("http://localhost:8088/show/tags/blogCount").then(res => {
        if (res.data.code == 0) { // 成功
          this.tagBlogCountList = res.data.data;
        }
      });
    },
    // 跳转至分类页面
    toTypeInfo(id, index){
      this.$router.push({ // 路由跳转并传参
        name:'types',
        params:{
          id:id, //博客id
          index:index
        },
      });
    },
    // 跳转至标签页面
    toTagInfo(id, index){
      this.$router.push({ // 路由跳转并传参
        name:'tags',
        params:{
          id:id, //博客id
          index:index
        },
      });
    },
  },
  created() {
    this.getTypeBlogCountList();// 分类对应博客数量列表
    this.getTagBlogCountList();// 标签对应博客数量列表
  }
}
</script>

<style scoped>

#aboutMe{

}

.m-about-module-bottom-top{
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #bbbbbb;
}

.m-about-module-bottom{
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #bbbbbb;
}

.m-about-module{
  width: 90%;
  margin: 0 auto;
}
</style>
